import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import cx from 'classnames';
import { WingBlank, WhiteSpace, Flex, List } from 'antd-mobile';
import { SCALE_PHY, SCALE_PHY2} from 'const';
import styles from '../scale/styles.less';

function ScalePhyTemplate({ dispatch, location, form, detail:{ patientValue }, ...rest }) {
  const { getFieldProps, getFieldValue, setFieldsValue, validateFields } = form;
  let Questions;
  if(rest.route.path == 'phy'){
    Questions = SCALE_PHY
  }else if(rest.route.path == 'phy2'){
    Questions = SCALE_PHY2
  }
  function isActive(key, value, i) {
    if (patientValue) {
      if(patientValue.indexOf("|") != -1){
        let check1 = patientValue.split("|");
        check1 = check1[1].split("");
        return check1[i] === value;
      }else{
        return patientValue[i] === value;
      }
    }

    if (!getFieldValue(key)) {
      return false;
    }

    return getFieldValue(key) === value;
  }
  // 提交按钮根据detail参数显示
  return (
    <WingBlank size="md">
      <WhiteSpace />
      <List>
        {Questions.map((question, i) => (
          <List.Item wrap key={question.Id}>
            {`${i + 1}. ${question.Title}`}
            <List.Item.Brief>
              <Flex justify="between">
                {question.Choicekey.split('|').map((option, ii) => {
                  const value = question.Choicevalue.split('|')[ii];
                  const key = question.Id;
                  return (
                    <Flex.Item key={value}>
                      <label
                        className={cx(styles.questionOption, styles.questionOptionNormal, {
                          [styles.questionOptionActive]: isActive(key, value, i),
                        })}
                      >
                        <input {...getFieldProps(`${key}`)} type="radio" name={key} value={value} checked={isActive(key, value, i)} required />
                        {option}
                      </label>
                    </Flex.Item>
                  );
                })}
              </Flex>
            </List.Item.Brief>
          </List.Item>
        ))}
      </List>
      <WhiteSpace size="xl" />
    </WingBlank>
  );
}

export default connect(({ scale }) => ({ ...scale }))(createForm()(ScalePhyTemplate));
